<script setup>
import { ref } from 'vue'
import { fetchCityData } from '@/api/weatherAPI'
import { useCityStore } from '../stores/cityStore'
// import { c } from 'vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf'

const city = ref('')

const cityStore = useCityStore()

function Request(){
    getData(city.value)
}
async function getData(cityName) {
    const response = await fetchCityData(cityName)
    console.log(response)
    console.log("更新状态前:")
    cityStore.updateLocation(response.location[0])
    console.log("更新状态后:")
    console.log(cityStore.location)
}

getData("成都")
// async function getData(cityName) {
//     if (!cityName?.trim()) {
//         error.value = '请输入城市名称'
//         return
//     }

//     try {
//         loading.value = true
//         error.value = ''
//         const response = await fetchCityData(cityName)
//         console.log('城市数据:', response)
//     } catch (err) {
//         error.value = '获取数据失败: ' + err.message
//         console.error('API错误:', err)
//     } finally {
//         loading.value = false
//     }
// }

// 修改事件处理函数
// const Request = () => {
//         getData(city.value)
// }
</script>

<template>
   <div><input type="search" name="" placeholder="请输入城市名称" v-model="city" @change="Request()"></div>
</template>

<style scoped>
.search-container {
    padding: 1rem;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 200px;
}

.error-message {
    color: #ff4444;
    margin-top: 8px;
    font-size: 14px;
}

.loading {
    color: #666;
    margin-top: 8px;
}
</style>